<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
	<title>mouse events test</title>
	<style type="text/css">
		@import "../../../resources/dojo.css";

		div {
			margin: 10px;
			padding: 10px;
			border: medium inset gray;
		}

		/* highlight on hover so it's clear where robot has moved the mouse */
		div, h1 {
			background-color: white;
     	}
		div:hover, h1:hover {
			background-color: cyan;
		}

		/* apply width to top level nodes, not using body > * since it doesn't work on IE6 */
		.top {
			width: 500px;
		}
	</style>
	
	<script type="text/javascript" data-dojo-config="isDebug: true, async: true" src="../../../dojo.js"></script>

	<script type="text/javascript">
		var ready;

		// Log of events, used by automated test harness
		var moveEvents = [];
		var clickEvents = [];
		var downEvents = [];

		require([
			'dojo/on',
			'dojo/dom',
			'dojo/json',
			'dojo/_base/array',
			'dojo/mouse',
			'dojo/domReady!'
		], function (on, dom, JSON, array, mouse) {
			on(dom.byId('outer'), mouse.enter, function (event) {
				moveEvents.push({ target: event.target.id, event: 'mouseenter' });
				console.log(JSON.stringify(moveEvents[moveEvents.length-1]));
			});

			on(dom.byId('outer'), mouse.leave, function (event) {
				moveEvents.push({ target: event.target.id, event: 'mouseleave' });
				console.log(JSON.stringify(moveEvents[moveEvents.length-1]));
			});

			array.forEach(['outer', 'middle', 'inner1', 'inner2'], function (id) {
				console.log('adding things to ' + id);
				var node = dom.byId(id);

				on(node, 'click', function(event) {
					clickEvents.push({
						target: event.target.id,
						currentTarget: event.currentTarget.id,
						event: 'click'
					});
					console.log(JSON.stringify(clickEvents[clickEvents.length-1]));
					if (event.currentTarget.id === 'middle' || event.currentTarget.id === 'outer') {
						event.stopPropagation();
						event.preventDefault();
					}
				}),
				
				// on(node, "click", function(event){
				// 	// repeated click event just to make sure that 2 events work
				// 	clickEvents.push({
				// 		target: event.target.id,
				// 		currentTarget: event.currentTarget.id,
				// 		event: "click"
				// 	});
				// 	console.log("repeated click event: " + JSON.stringify(clickEvents[clickEvents.length-1]));
				// 	if (event.currentTarget.id === "middle" || event.currentTarget.id === "outer") {
				// 		event.stopPropagation();
				// 		event.preventDefault();
				// 	}
				// }),

				on(node, 'mousedown', function (event) {
					if (event.type === 'unload') {
						console.error('onmousedown handler got unload event');
						debugger;
						return;
					}

					downEvents.push({
						target: event.target.id,
						currentTarget: event.currentTarget.id,
						event: 'mousedown',
						isLeft: mouse.isLeft(event),
						isMiddle: mouse.isMiddle(event),
						isRight: mouse.isRight(event)
					});

					console.log(JSON.stringify(downEvents[downEvents.length-1]));

					if (event.currentTarget.id === 'middle' || event.currentTarget.id === 'outer') {
						event.stopPropagation();
						event.preventDefault();
					}
				})
			});

			ready = true;
		});
	</script>
</head>
<body>
	<h1 id="header" class="top">mouse events test</h1>

	<div id="outer" class="top">
		<span id="outerLabel">outer</span>
		<div id="middle">
			<span id="middleLabel">middle</span>
			<div id="inner1">inner 1</div>
			<div id="labelBetweenInners">between inner 1 and inner 2</div>
			<div id="inner2">inner 2</div>
		</div>
	</div>

	<div id="afterOuter" class="top">after outer</div>
</body>
</html>
